<template>
  <div class="table_box">
    <x-from :data="seach" :inline="true" @submitForm="query"/>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      highlight-current-row
      style="width: 100%;">
      <el-table-column v-for="(item,index) in headers" :key="index" :label="item.label || $t(item.tLabel)" :align="item.align || 'center'" :width="item.width" :class-name="item.className">
        <template slot-scope="scope">
          <el-tag v-if="item.tag" :type="item.tag.type(scope.row)">{{ item.tag.text(scope.row) }}</el-tag>
          <el-button
            v-for="(button,bIndex) in item.button"
            v-else-if="item.button"
            v-show="button.show == undefined ? true : button.show(scope.row)"
            :key="bIndex"
            :type="button.type"
            :size="button.size || 'mini'"
            @click="(typeof button.click === 'function' ? button.click(scope.row,button.method) : buttonRatch(scope.row,button.click))"
          >{{ button.text || $t(button.tText) }}</el-button>
          <span v-else>{{ typeof item.scope === "function" ? item.scope(scope.row) : setScopeText(scope,item.scope) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container cms-pagination">
      <el-row type="flex" justify="space-between" style="width: 100%">
        <el-col :span="12">
          <div class="page-input">
            <span>每页显示</span>
            <el-input
              v-model.number="page.inputNum"
              class="small"
              type="number"
              size="mini"
              min="0"
              @keyup.enter.native="setPage"
            />
            <span>条，输入后按回车键</span>
          </div>
        </el-col>
        <el-col :span="12">
          <el-pagination
            :current-page="page.pageNo"
            :page-size="page.pageSize"
            :total="total"
            style="float: right"
            class="page-pagination"
            background
            layout="total, prev, pager, next"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </div>
    <el-dialog :title="$t(`table.${edit.textMap[edit.dialogStatus]}`)" :visible.sync="edit.visible">
      <x-from :data="editFrom"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="edit.visible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="edit.dialogStatus==='create'?createData():updateData()">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import waves from '@/directive/waves' // 水波纹指令
import xFrom from './form' // 水波纹指令
import listMixins from '@/mixins/list'
export default {
  name: 'Xtable',
  directives: {
    waves
  },
  components: {
    xFrom
  },
  mixins: [listMixins],
  props: {
    headers: {
      type: [Array, Object],
      default: null
    },
    seach: {
      type: [Array, Object],
      default: null
    },
    editFrom: {
      type: [Array, Object],
      default: null
    }
  },
  data() {
    return {

    }
  },
  created() {

  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
@import "src/styles/table.scss";
</style>
